<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="0" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<link href="${path }/resource/css/visitor/index.css" rel="stylesheet"
	type="text/css">
	<style type="text/css">
	  .banner{width: 100%}
        .banner img{width: 100%}
        .news{padding-bottom: 60px;}
        .news .wrap{margin-top: 25px;overflow:hidden;}
        .news .wrap .left{width: 100%;background: #ffffff;}

        .fl{float: left;}
        .fr{float: right;}
        .news .wrap  .tab-list{margin-bottom: 25px;}
        .news .wrap  .tab-list a{height:34px;background:#ffffff;padding :0 30px;margin-right:12px;color: #555555;display: inline-block;font-size: 16px;line-height: 34px;border-radius: 10px;}
        .news .wrap  .tab-list a.active{color: #ffffff;background: #c18a3c}
        .news .wrap .left ul{padding: 0 35px;}
        .news .wrap .left ul li{width:45%;margin-right:85px;float:left;position: relative; color: #555555; border-bottom: 1px solid #f4f4f4;height: 65px;line-height: 65px;}
        .news .wrap .left ul li:nth-of-type(even){margin-right: 0;}
        .news .wrap .left ul li .solid{position: absolute;
            top: 50%;margin-top:-2px;width: 6px;height: 6px;background: #c6944e;border-radius: 50%;display: inline-block}
        .news .wrap .left ul li span{display: inline-block;}
        .news .wrap .left ul li .time{padding-left:20px;font-size: 16px;color: #555555;}
        .news .wrap .left ul li .head{margin-left:15px;border-radius:10px;background: #c6944e;color: #ffffff;width: 66px;height: 22px;line-height: 22px;text-align: center;  }
        .news .wrap .left ul li .abstract{margin-left: 20px;}
        .news .wrap .right{width: 550px;height:412px;overflow: hidden }
        .news .wrap .right img{width:100%;height: 362px;}
        .news .wrap .right span{width: 100%;background: #c78d56;color: #ffffff;height: 50px;font-size:16px;line-height:50px;text-align: center;display: block}
        .tab-con{display: none;height:260px; }
        .tab-con:nth-of-type(1){display: block;}
        .pages{text-align:center;margin: 0px auto 50px;}
        .pages a{margin-right:5px;width: 34px;height: 34px;line-height: 34px;
        text-align: center;background:#e7d094;color: #ffffff;display: inline-block;border-radius: 4px; }
        .pages a.active{background: #c6944e }

	</style>
</head>
<body class="">
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="container" id="app">
		<br> <br>
		<div class="row">
			<div class="col-md-9">
				<div class="starter-template">
					<h3 class="text-danger">{{artTypeName}}</h3>
					<hr>
					<div class="row">
						<div class="col-md-12 " >
							<div v-for="art in arts" class="articlebox">
								<div class="time ">
									<span>{{art.artCreatetiem | getDate }}</span>
									<p>{{art.artCreatetiem | getYear }}</p>
								</div>
								<div class="abstract" v-on:click="toArticle(art.artId)">
									<h3>
										<a target="blank"
											:href="'${path}/redirect/article?id='+art.artId">
											{{art.artTitle}}</a>
									</h3>
									<p>
										<a target="blank"
											:href="'${path}/redirect/article?id='+art.artId">{{art.artAbstract}}</a>
									</p>
								</div>
							</div>
							<div class="abstract" v-bind:style="{display:more}">
								<p class="text-center">没有更多啦~</p>
							</div>
							<div class="row text-center">
								<i v-on:click="loadArt()" class="fa  fa-angle-double-down more"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="listBox">
					<h3>分类</h3>
					<cms:artType var="type" code="新闻资讯"></cms:artType>
					<ul>
						<c:forEach items="${type }" var="item">
							<li v-on:click="changeType('${item.artTypeId }','${item.artTypeName }')" >${item.artTypeName }</li>
						</c:forEach>
					</ul>
				</div>
			</div>
		</div>
	</div>


	<jsp:include page="_foot.jsp"></jsp:include>
	<script type="text/javascript"
		src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/systools/AjaxProxy.js"></script>
	<script type="text/javascript"
		src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el : '#app',
			data : {
				offset : 0,
				limit : 10,
				more : "none",
				artTypeId:null,
				artTypeName:"最近更新",
				arts : []
			},
			filters : {
				getDate : function(value) {
					return new Date(value).getDate();
				},
				getYear : function(value) {
					var data = new Date(value);
					return data.getFullYear() + "/" + (data.getMonth() + 1);
				}
			},
			methods : {
				toArticle : function(id) {
					window.open("${path}/redirect/article?id=" + id);
				},
				loadArt : function() {
					$.AjaxProxy({
						c : false,
						p : {
							"offset" : app.offset,
							"limit" : app.limit,
							"artTypeId":app.artTypeId
						}
					}).invoke("${path}/findNews", function(loj) {
						if (loj.getValue("rows").length < 1) {
							app.more = "block";
						} else {
							app.arts = app.arts.concat(loj.getValue("rows"));
							app.offset += app.limit;
						}
					});
				},
				changeType:function(artTypeId,artTypeName){
					app.artTypeId=artTypeId;
					app.artTypeName=artTypeName;
					app.arts=[];
					app.offset=0;
					app.more = "none";
					app.loadArt();
				}
			},
		});
		app.loadArt();
	</script>

</body>
</html>
